<template>
	<block>
		<view>
			<view :class="'fui-icon-group noborder col-' + diyitem.style.rownum" :style="'background:' + diyitem.style.background" v-if="diyitem.style.showtype == '0'">
				<view
					@tap="navigate"
					class="fui-icon-col external"
					:data-appid="childitem.appid"
					:data-appurl="childitem.appurl"
					:data-phone="childitem.phone"
					:data-url="childitem.linkurl"
					v-for="(childitem, childid) in diyitem.data"
					:key="childid"
				>
					<view class="icon"><image :class="diyitem.style.navstyle" :src="childitem.imgurl"></image></view>
					<view class="text" :style="'color:' + childitem.color">{{ childitem.text }}</view>
				</view>
			</view>
			<swiper
				:autoplay="autoplay"
				class="menu"
				:duration="duration"
				:indicatorDots="diyitem.style.showdot == 1 ? true : false"
				:interval="interval"
				:style="'background:' + diyitem.style.background + ';padding:20rpx 0;height:' + (diyitem.data_line * 160 + diyitem.data_line * 30) + 'rpx'"
				v-if="diyitem.style.showtype == '1'"
			>
				<swiper-item :class="'col-' + diyitem.style.rownum" v-for="(childitem, childid) in diyitem.data_temp" :key="childid">
					<view
						@tap="navigate"
						class="fui-icon-col external"
						:data-appid="menu_item.appid"
						:data-appurl="menu_item.appurl"
						:data-phone="menu_item.phone"
						:data-url="menu_item.linkurl"
						v-for="(menu_item, menu_index) in childitem"
						:key="menu_index"
					>
						<view class="icon"><image :class="diyitem.style.navstyle" :src="menu_item.imgurl"></image></view>
						<view class="text" :style="'color:' + menu_item.color">{{ menu_item.text }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		</block>
</template>
<script>
export default {
	props: {
		diyitem: {
			type: Object
		},
		autoplay: 0,
		duration: 300,
		interval: 300
	},
	methods: {
		navigate(e) {
			this.$emit('getMessage', e);
		}
	}
};
</script>
<style>
.fui-icon-group .fui-icon-col .icon image {
    height: 70rpx;
    width: 70rpx;
}

.fui-icon-col .icon image {
    height: 70rpx;
    width: 70rpx;
}

.menu swiper-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.menu swiper-item .fui-icon-col {
    width: 25%;
    text-align: center;
}

.menu swiper-item.col-3 .fui-icon-col {
    width: 33.3%;
    text-align: center;
}

.menu swiper-item.col-5 .fui-icon-col {
    width: 20%;
    text-align: center;
}

.fui-icon-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 140rpx;
    margin-bottom: 20rpx;
}
</style>
